﻿<div>
    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <a class="brand" data-bind="attr: { href: router.visibleRoutes()[0].hash }">
                <i class="icon-home"></i>
                <span>Home</span>
            </a>
            <ul class="nav" data-bind="foreach: router.visibleRoutes">
                <li data-bind="css: { active: isActive }">
                    <a data-bind="attr: { href: hash }, html: name"></a>
                </li>
            </ul>
            <div class="loader pull-right" data-bind="css: { active: router.isNavigating }">
                <i class="icon-spinner icon-2x icon-spin"></i>
            </div>
            <form class="navbar-search pull-right" data-bind="submit:search">
                <input type="text" class="search-query" placeholder="Search">
            </form>
        </div>
    </div>
    
    <div class="container-fluid page-host">
        <!--ko compose: { 
            model: router.activeItem, //wiring the router
            afterCompose: router.afterCompose, //wiring the router
            transition:'entrance', //use the 'entrance' transition when switching views
            cacheViews:true //telling composition to keep views in the dom, and reuse them (only a good idea with singleton view models)
        }--><!--/ko-->
    </div>
</div>